<template>
  <div class="FromGood">
    <el-form
      :model="From"
      :rules="ruleGood"
      ref="From"
      label-width="130px"
      class="demo-ruleForm"
    >
      <el-form-item label="充值金额" prop="name">
        <el-input
          v-model="From.amount"
          placeholder="请输入"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item label="充值类型" prop="name">
        <el-select v-model="From.payType" placeholder=" 默认普通充值">
          <el-option label="普通充值" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="优惠金额/赠送金额" prop="name">
        <el-input
          v-model="From.couponFee"
          placeholder="请输入优惠金额"
        ></el-input>
      </el-form-item>
      <el-form-item label="充值描述" prop="name">
        <el-input
          v-model="From.description"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="name">
        <el-input v-model="From.remark" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="submitForm('From')"
          >立即添加</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    let letterRule = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,18}$/;
      if (value === "") {
        callback(new Error("输入内容不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      From: {
        amount: "",
        couponFee: "",
        payType: "0",
        description: "",
        remark: "",
      },
      ruleGood: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
      },
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.loading = true;
          this.adduser();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async adduser() {
      let type = "success",
        rmsg;
      let res = await this.http.post("/chargeList/add", this.From);
      if (!res.error) {
        (type = "success"), (rmsg = "添加成功");
      } else {
        (type = "error"), (rmsg = "添加失败");
      }
      this.eui.Message({
        message: rmsg,
        type: type,
        duration: 5 * 1000,
      });
      this.loading = false;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>